From e8671e9efd1771bc070b11f7200a9f212ed7822f Mon Sep 17 00:00:00 2001 From: real-zephex Date: Mon, 25 Mar 2024 16:23:08 +0530 Subject: feature update: added the functionality to download mangas --- src/app/manga/[title]/[id]/[read]/download.jsx | 17 +++++++++++++++++ src/app/manga/[title]/[id]/[read]/page.jsx | 2 ++ src/app/manga/[title]/[id]/[read]/read.module.css | 19 +++++++++++++++++++ 3 files changed, 38 insertions(+) create mode 100644 src/app/manga/[title]/[id]/[read]/download.jsx (limited to 'src/app/manga/[title]') diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx new file mode 100644 index 0000000..7eb1e7e --- /dev/null +++ b/src/app/manga/[title]/[id]/[read]/download.jsx @@ -0,0 +1,17 @@ +import styles from "./read.module.css"; +import Link from "next/link"; + +export default function DownloadManga({ chapterId: id }) { + return ( +
+ + + +
+ ); +} diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx index 0d58df6..2823f81 100644 --- a/src/app/manga/[title]/[id]/[read]/page.jsx +++ b/src/app/manga/[title]/[id]/[read]/page.jsx @@ -1,5 +1,6 @@ import styles from "./read.module.css"; import Image from "next/image"; +import DownloadManga from "./download"; export default async function Read({ params }) { const chapterId = params.read; @@ -23,6 +24,7 @@ export default async function Read({ params }) { return (
+ {images && images.map((item, index) => (
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css index 3a8c99f..80d91ae 100644 --- a/src/app/manga/[title]/[id]/[read]/read.module.css +++ b/src/app/manga/[title]/[id]/[read]/read.module.css @@ -31,6 +31,25 @@ font-size: 20px; } +.DownloadMain { + text-align: center; +} + +.DownloadMain button { + border: none; + outline: none; + border-radius: 5px; + padding: 5px; + font-family: "Lato"; + font-size: 16px; + background-color: var(--light-green); + cursor: pointer; +} + +.DownloadMain button:hover { + background-color: var(--pastel-red); +} + @media screen and (max-width: 768px) { .ImageContainer img { width: 90%; -- cgit v1.2.3